<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ page import="java.util.List"%>
<%@ page isELIgnored="false" %> <%--isELIgnored=true禁用EL表达式--%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.kid{
				margin-bottom: 10px;
			}
			.kid-l{
				width: 200px;
			}
			.kid-r{
				width: 200px;
				margin-left: 20px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/layui-v2.6.13/layui/css/layui.css"/>
		<script type="text/javascript" src="<%=request.getContextPath() %>/layui-v2.6.13/layui/layui.js"></script>
	    <script src="<%=request.getContextPath() %>/js/jquery.min-2.1.1.js"></script>
	</head>
	<body>
		<div style="width: 50%; padding: 20px;">
			<form class="layui-form" id="insertForm">
			    <input type="hidden" name="imgUrl" id="imgUrl">
				<div class="kid">
					<div class="layui-inline kid-l">
						<input type="text" class="layui-input" placeholder="商品名称" name="gName">
					</div>
					<div class="layui-inline kid-r">
					    <input type="text" class="layui-input" id="text"  placeholder="图片路径">
					</div>

				</div>
				<div class="kid">
					<div class="layui-inline kid-l">
						<input type="text" class="layui-input" placeholder="库存" name="gCount">
					</div>
					<div class="layui-inline kid-r">

                        <button type="button" class="layui-btn" id="imgUpload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>

				</div>
				<div class="kid">
					<div class="layui-inline kid-l">
						<select name="sId">
							<option>分类</option>
							<c:forEach items="${sort}" var="obj">
                                <option value="${obj.sortId}">${obj.sName}</option>
                            </c:forEach>
						</select>
					</div>
					<div class="layui-inline kid-r">
                        <input type="text" class="layui-input" placeholder="单价" name= "gPrice">
                    </div>


				</div>
				<div style="width: 425px;">
					<button class="layui-btn layui-btn-fluid" onclick="add()">添加</button>
				</div>

			</form>
		</div>
		<script>
			layui.use('upload', function(){
				var upload = layui.upload;

				//执行实例
				upload.render({
					elem: '#imgUpload' //绑定元素
					,url: 'upload' //上传接口
					,accept: 'images' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
					,acceptMime: 'image/*' //规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表
					,done: function(res){//上传完毕回调,res必须是json格式
						console.info(res);
						console.info(res.imgUrl);
						var img=$("#imgUrl");
						$("#text").val(res.imgUrl);
						img.val(res.imgUrl);
						console.info(img.val());

					}
					,error: function(){
						//请求异常回调
					}
				});
			});


		 function add(){
            var params = $("#insertForm").serialize();
            console.info(params);
            $.ajax({
                url:"insert",
                data:params,
                type:"POST",
                success:function(str){
                    if(str="1"){
                        alert("添加成功");
                        location.reload();

                        window.location.reload();
                    }else{
                        alert("添加失败");
                        location.reload();

                        window.location.reload();
                    }
                }
            })
        }





        //注册layui弹层组件
        layui.use(['layer','form'], function(){
            var layer = layui.layer;
            var form = layui.form;

            //二级联动：查询学院对应的专业列表
            //select标签绑定触发事件
            form.on('select(filter)', function(data){
                console.info(data.elem);//得到select原始DOM对象
                console.info(data.value);//得到该选中的值

                var params = "parentId=" + data.value;

                $.ajax({
                    url:"sId",
                    data:params,
                    type:"POST",
                    success: function(obj){
                        //json字符串转数组
                        var arr = JSON.parse(obj);

                        $("#sId").empty();

                        //添加子元素
                        $.each(arr, function(index, item){
                            $("#sId").append("<option value='"+item.sortId+"'>"+item.sName+"</option>");
                        });
                        //重新渲染select下拉框
                        form.render('select');
                    }
                });
            });
        });
		</script>
	</body>
</html>